#@layoutT("物品图片上传")
#define main()
</h1>
<div class="form_box">

    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
        <legend>多文件上传&nbsp;<span id="fileNumber" style="font-size: 18px;color:#424041"></span></legend>
    </fieldset>
    <div class="layui-progress layui-hide" lay-showpercent="true" lay-filter="upload" style="margin-bottom:5px">
        <div class="layui-progress-bar" lay-percent="0%"></div>
    </div>

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="fileList">选择文件</button>
        <button type="button" class="layui-btn" id="fileListAction">开始上传</button>
        <div class="layui-upload-list" style="overflow-y:auto">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="uploadList"></tbody>
            </table>
        </div>
    </div>

    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 10px;">
        <legend>图片列表</legend>
    </fieldset>


    <!-- 	每行的操作按钮 -->
    <script type="text/html" id="bar_maingrid">
        <a class="layui-btn layui-btn-xs" lay-event="download">下载</a>
        <a class="layui-btn layui-btn-xs" lay-event="review">预览</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <div class="layui-upload">
        <div class="layui-upload-list" style="max-height:500px;overflow-y:auto;margin:0;">
            <table id="maingrid" lay-filter="maingrid"></table>

        </div>

    </div>

</div>

#end

#define js()
<script type="text/javascript">

$(function(){
        getEntityList();
    })


function getEntityList(){
        var gridArgs = {
            deleteUrl : null,
            updateUrl : null,
            detailUrl : null,
            addUrl : null,
            /** 重置密码 **/
            resetUrl : null,
            /** 数据主键* */
            dataId : "id",
            /** 表格标题* */
            title : null,
            /**特殊的ajax请求**/
            ajaxUrl:null,
            /**提示信息**/
            resetTitle:null
        };
        gridArgs.title='物品图片';
        gridArgs.dataId='img_id';
        gridArgs.deleteUrl='#(path)/erp/info/entity/delete?primaryKey='+gridArgs.dataId;
        gridArgs.gridDivId ='maingrid';
        initGrid({id : 'maingrid'
            ,elem : '#maingrid'
            ,cellMinWidth: 80
            ,cols : [ [
                {title:'序号',type:'numbers',width:35},
                {title: '主键', field: 'img_id' },
                {title: '物品编码', field: 'entity_code' },
                {title: '文件名', field: 'img_name'},
                {title: '文件大小', field: 'img_size'},
                {title: '文件路径', field: 'img_url'},
                {title: '状态', field: 'status'},
                {title: '上传时间', field: 'create_time'},
                {title: '上传人', field: 'creator'},
                {title: '操作',fixed:'right',width : 180,align : 'left',toolbar : '#bar_maingrid'} // 这里的toolbar值是模板元素的选择器
            ] ]
            ,url:"#(path)/erp/info/entity/imgList?entityCode=#(entityCode??)"
            ,where:{"object":"sys_tree","primaryKey":gridArgs.dataId}
            ,searchForm : 'searchForm'
        },{
            review:reviewImg,
            download:download
        },gridArgs);
    }
function reviewImg(obj){
	    var data = obj.data;
	    var fileName = data.img_name;
	    var img_id = data.img_id;
	    debugger
		openDialog(fileName,'#(path)/erp/info/entity/review?img_id='+img_id,false,850,600,null);
	}
function download(){}

layui.use(['upload','element'], function(){
	  var $ = layui.jquery
	  ,element = layui.element
	  ,upload = layui.upload;
	  var allowUploadFile='.jpg .png .ico .gif .jpeg .xls .xlsx .doc .html .pdf ';
	  var allNum=0,fished=0;
	  var start=false;
	 //进度条触发事件
	  var active = {
	   loading: function(othis){
	      //模拟loading
	      var timer = setInterval(function(){
	        if(allNum!=0){
			    var n=(fished/allNum*100).toFixed(0);
			    element.progress('upload', n+'%');
			    if(n==100){
				    clearInterval(timer);
				}
		    }
	      }, 100);
	    }
	//计算触发事件
	  ,fileNum:function(othis){
			var timer = setInterval(function(){
				$('#fileNumber').html('('+fished+'/'+allNum+')');
				if(fished==allNum&&allNum!=0){
					 clearInterval(timer);
					 start=false;
				}
			},200);
		}
	  };

	 //监听上传按钮
	  $('#fileListAction').on('click', function(){
		 if(allNum>0){
		  	$('.layui-progress').removeClass('layui-hide');
		    active['loading'].call(this, $(this));
		}
	});

	//多文件列表示例
	var demoListView = $('#uploadList')
	,uploadListIns = upload.render({
	  elem: '#fileList'
	  ,url: '#(path)/erp/info/entity/upload?entityCode=#(entityCode??)'
	  ,accept: 'file'
	  ,multiple: true
	  ,auto: false
	  ,bindAction: '#fileListAction'
	  ,choose: function(obj){
	    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
	    //读取本地文件
	    obj.preview(function(index, file, result){
	   		allNum++;
	   		if(fished>0){
	   			active['loading'].call(this, $(this));
		   	}
		  var type=file.name.substring(file.name.lastIndexOf("."),file.name.length);
	      var tr = $(['<tr id="upload-'+ index +'">'
            ,'<td>'+ allNum +'</td>'
	        ,'<td>'+ file.name +'</td>'
	        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
	        ,'<td>等待上传</td>'
	        ,'<td>'
	          ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
	          ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
	        ,'</td>'
	      ,'</tr>'].join(''));

	      //单个重传
	      tr.find('.demo-reload').on('click', function(){
	        obj.upload(index, file);
	      });

	      //删除
	      tr.find('.demo-delete').on('click', function(){
			allNum--;
	        delete files[index]; //删除对应的文件
	        tr.remove();
	        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
	      });

	      demoListView.append(tr);

	      //校验文件类型
	      if(allowUploadFile.indexOf(type)==-1 ){
		      var tr = demoListView.find('tr#upload-'+ index)
		      ,tds = tr.children();
		      tds.eq(3).html('<span style="color: #FF5722;">'+type+' 类型不允许上传</span>');
		      delete files[index]; //删除文件队列不合法的文件
		    }
	    });
	    //激活计数函数
	    if(!start){
		    active['fileNum'].call(this, $(this));
		    start=true;
		}
	  }
	  ,done: function(res, index, upload){
	    if(res.state == 'ok'){ //上传成功
		  fished++;
	      var tr = demoListView.find('tr#upload-'+ index)
	      ,tds = tr.children();
	      tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
	      tds.eq(4).html(''); //清空操作
	      return delete this.files[index]; //删除文件队列已经上传成功的文件
	    }
	    this.error(index, upload);
	  }
	  ,error: function(index, upload){
	    var tr = demoListView.find('tr#upload-'+ index)
	    ,tds = tr.children();
	    tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
	    tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
	  }
	});

});

function deleteFile(url,fileName){
		var url='#(path)/erp/info/entity/deleteImg/'+url;
		layer.confirm('确定要删除 '+fileName+' 吗',{icon: 3, title:'提示'},function(index){
			$.post(url,function(data){
				setTimeout('window.location.reload()',500);
				if(data.state=='ok'){
				    g("删除成功",{icon:1});
				}else{
					layer.msg("附件不存在",{icon:2});
				}
			});
		});
	}

</script>

#end


